<template>
  <div class="wrap">
    <header>
      <span @click="go()">&lt;</span>
      <p>团购详情</p>
    </header>
    <main>
      <dl class="list">
        <dt @click="toTuandetail(item)">
          <img :src="list.img" alt />
        </dt>
        <dd>
          <h3>{{list.title}}</h3>
          <p>{{list.location}}</p>
          <div class="t11">
            <p>
              <label>活动时间:</label>
              <span>{{list.date}}</span>
            </p>
            <p>
              <label>已报名:</label>
              <span>{{list.id}}人</span>
            </p>
          </div>
        </dd>
      </dl>
      <div class="intro">
        <h3>团购介绍</h3>
        <p>
          {{list.introduce}}
          <span>团购介绍团购介绍团介绍团购介购介绍团购</span>
          <span>{{list.introduce}}</span>
        </p>
      </div>
      <div class="pers">
        <van-swipe-cell v-for="(item,index) in lists" :key="index" class="mes">
          <dl>
            <dt>
              <img :src="item.img" alt />
            </dt>
            <dd>
              <div>
                <h4>{{item.name}}</h4>
              </div>
              <p>{{item.phone}}</p>
            </dd>
          </dl>
          <template #right>
            <van-button square type="danger" text="删除" @click="del(item.id)" />
          </template>
        </van-swipe-cell>
      </div>
    </main>
  </div>
</template>

<script>
import axios from "../../utils/request";
export default {
  data() {
    return {
      list: [],
      lists: []
    };
  },
  created() {
    this.tuandetail();
    this.getlist();
  },
  methods: {
    go() {
      this.$router.go(-1);
    },

    //详情渲染
    tuandetail() {
      axios({
        url: "/api/detail",
        method: "post",
        data: this.$route.params
      }).then(res => {
        // console.log(res);
        this.list = res.data.data;
      });
    },

    //渲染
    getlist() {
      axios({
        url: "/api/getList",
        method: "post"
      }).then(res => {
        console.log(res);
        this.lists = res.data.data;
      });
    },

    //删除
    del(id) {
      axios({
        url: "/api/delList",
        method: "post",
        data: { id }
      }).then(res => {
        console.log(res);
        this.getlist();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  width: 100%;
  height: 50px;
  display: flex;
  line-height: 50px;
  align-items: center;
  background: rgb(56, 121, 240);
  padding: 15px;
  color: #fff;
  p {
    padding-left: 38%;
  }
}
main {
  flex: 1;
  overflow-y: scroll;
  .list {
    margin: 15px;
    dt img {
      width: 100%;
      height: 210px;
    }
    dd {
      h3 {
        padding: 5px 0;
        font-size: 18px;
      }
      p {
        font-size: 15px;
      }
      .t11 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 0;
      }
    }
  }
  .intro {
    margin: 15px;
    h3 {
      padding: 10px 0;
    }
    p {
      font-size: 15px;
      color: rgb(141, 140, 140);
      line-height: 26px;
    }
  }
  .pers {
    height: 150px;
    overflow: hidden;
    .mes {
      background: #f1f1f1;
      margin: 15px;
      dl {
        display: flex;
        dt img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }
        dd {
          margin-left: 15px;
          div {
            display: flex;
            justify-content: space-between;
            span {
              font-size: 14px;
              color: #999;
            }
          }
          p {
            font-size: 15px;
            padding-top: 8px;
          }
        }
      }
    }
  }
}
</style>